<template>
  <div class="commodity">
    <div v-for="item in datalist" :key="item">
      <van-card
        :price="item.price"
        :title="item.name"
        thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
      >
        <template #footer>
          <van-stepper
            default-value="0"
            theme="round"
            button-size="22"
            disable-input
            min="0"
            @change="(value) => ChangeStepper(value, item)"
          />
        </template>
      </van-card>
    </div>
  </div>
  <!-- 底部 -->
  <!-- <van-action-bar class="van-safe-area-bottom van-hairline--top">
    <van-action-bar-icon
      icon="cart-o"
      text="购物车"
      :badge="ShoppingNum"
      @click="() => onCartClick()"
    />
    <van-action-bar-button
      type="danger"
      text="立即购买"
      @click="() => onClickButton()"
    />
  </van-action-bar> -->
  <van-submit-bar
    class="van-safe-area-bottom van-hairline--top"
    :price="PriceNum"
    suffix-label="元"
    button-text="提交订单"
    @submit="onClickButton()"
  >
    <van-action-bar-icon
      icon="cart-o"
      text="购物车"
      :badge="ShoppingNum"
      @click="() => onCartClick()"
    />
  </van-submit-bar>
  <!-- 信息 -->
  <div class="information" v-if="information">
    <van-address-edit
      show-delete
      delete-button-text="返回"
      save-button-text="提交"
      :area-list="areaList"
      :show-area="true"
      :area-columns-placeholder="['请选择', '请选择', '请选择']"
      @save="(value) => onSave(value)"
      @change-detail="(value) => onChangeDetail(value)"
      @delete="() => onDelete()"
    />
  </div>
  <!-- 购物车 -->
  <van-action-sheet v-model:show="sheetShow" title="已选商品">
    <div class="content" style="min-height: 200px">
      <div
        class="shli van-hairline--top-bottom"
        v-for="(item, index) in ShoppingValue"
        :key="index"
      >
        <span class="name">
          {{ item.name }}
        </span>
        <span class="line">
          数量：
          <i>{{ item.num }}</i>
          （个） 价格：
          <i>{{ item.price / 100 }}</i>
          （元）
        </span>
      </div>
    </div>
  </van-action-sheet>
</template>
<script setup>
import { ref, getCurrentInstance, onMounted } from "vue";
import { showToast } from "vant";
import { areaList } from "@vant/area-data";
const datalist = ref([
  {
    name: "商品1",
    number: 0,
    price: 2,
  },
  {
    name: "商品2",
    number: 0,
    price: 3,
  },
  {
    name: "商品4",
    number: 0,
    price: 2,
  },
  {
    name: "商品6",
    number: 0,
    price: 2.5,
  },
  {
    name: "商品6",
    number: 0,
    price: 2.5,
  },
  {
    name: "商品7",
    number: 0,
    price: 2.3,
  },
  {
    name: "商品8",
    number: 0,
    price: 2.2,
  },
]);
const { proxy } = getCurrentInstance();
const PriceNum = ref(0);
const sheetShow = ref(false);
const information = ref(false);
const ShoppingNum = ref(0);
const ShoppingValue = ref([]);
const ShoppingObject = ref({});

onMounted(() => {
  getlist();
});
/* 请求数据 */
const getlist = () => {
  proxy.$http.get("").then((response) => {
    let data = response.data;
  });
};
const ChangeStepper = (value, item) => {
  const objName = item.name;
  if (value === 0) {
    /* 移除商品 */
    delete ShoppingObject.value[objName];
    const index = ShoppingValue.value.findIndex(
      (product) => product.name === objName
    );
    if (index !== -1) {
      ShoppingValue.value.splice(index, 1);
    }
  } else {
    ShoppingObject.value[objName] = {
      name: item.name,
      num: value,
      price: value * item.price * 100,
    };
    /* 判断商品是否存在 */
    const foundIndex = ShoppingValue.value.findIndex(
      (product) => product.name === objName
    );
    if (foundIndex !== -1) {
      /* 存在---更新商品 */
      ShoppingValue.value[foundIndex].num = value;
      ShoppingValue.value[foundIndex].price = value * item.price * 100;
    } else {
      /* 不存在---添加商品 */
      ShoppingValue.value.push(ShoppingObject.value[objName]);
    }
  }
  /* 商品数量 */
  ShoppingNum.value = ShoppingValue.value.reduce((total, product) => {
    return total + product.num;
  }, 0);
  /* 商品价格 */
  PriceNum.value = ShoppingValue.value.reduce((total, product) => {
    return total + product.price;
  }, 0);
};
/* 立即购买 */
const onClickButton = () => {
  if (ShoppingNum.value == 0) {
    showToast("请选择商品");
  } else {
    information.value = true;
  }
};
/* 购物车 */
const onCartClick = () => {
  if (ShoppingNum.value == 0) {
    showToast("请选择商品");
  } else {
    sheetShow.value = true;
  }
};
/* 个人信息 */
const onChangeDetail = (val) => {
  console.log(val);
};
/* 保存 */
const onSave = (val) => {
  console.log(val);
};
/* 返回 */
const onDelete = () => {
  information.value = false;
};
</script>
  
<style scoped lang="less">
.commodity {
  padding-bottom: 70px;
}
.commodity :deep(.van-card__content) {
  flex: none;
  justify-content: center;
}
.commodity :deep(.van-card__footer) {
  height: fit-content;
  position: absolute;
  top: 0;
  right: 10px;
  bottom: 0;
  margin: auto;
}

.commodity:deep(.van-card) {
  margin: 10px auto;
}
.commodity:deep(.van-card__price) {
  color: red;
}
.commodity:deep(.van-card__price-decimal),
.commodity:deep(.van-card__price-currency) {
  font-size: 16px;
}

.commodity:deep(.van-card__price-integer) {
  font-size: 20px;
  margin-left: 5px;
}
.commodity:deep(.van-card__title) {
  font-size: 18px;
  max-height: initial !important;
  line-height: 42px;
}
.information {
  position: fixed;
  width: 100%;
  height: 100%;
  background: #fff;
  top: 0;
  left: 0;
  z-index: 100;
}
.van-hairline--top {
  padding: 5px 0;
}
.shli {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  .name {
    font-weight: 600;
  }
  .line {
    i {
      font-weight: 700;
      color: red;
    }
  }
}
</style>
  